<template>
	<view class="container">
		<u-navbar title="倾诉记录" :autoBack="true" :placeholder="true"> </u-navbar>
		<!-- 标签页 -->
		<u-tabs :list="tabList" :current="activeTab" @change="handleTabChange" active-color="#678FCD"></u-tabs>
		<!-- 记录列表 -->
		<view v-for="(item, index) in currentRecords" :key="index" class="record-card">
			<!-- 状态标题 -->
			<view class="card-header">
				<text class="status-tag">{{ item.evaluationID ? '已评价' : '待评价' }}</text>
				<text class="time-text">倾诉时间：{{ item.createtime }}</text>
			</view>
			<!-- 主体内容 -->
			<view class="card-body">
				<!-- 左侧信息 -->
				<view class="teacher-info">
					<image :src="item.teacherHead" class="avatar" mode="aspectFill" />
					<view class="teacher-detail">
						<text class="teacher-name">{{ item.teacherName }}</text>
						<view class="status-box" :class="'status-' + item.onlineStatus">
							<view class="status-dot"></view>
							<text class="status-text">{{ statusText[item.onlineStatus] }}</text>
						</view>
					</view>
				</view>

				<!-- 右侧按钮组 -->
				<view class="button-group">
					<u-button v-if="!item.evaluationID" type="primary" size="mini" shape="circle" :size="large"
						@click="navigateEvaluate(item)">
						去评价
					</u-button>
					<u-button type="info" size="mini" shape="circle" :size="large"
						@click="navigateTeacher(item.teacherId)">
						倾诉
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myListenRecord
	} from '@/utils/getDate.js';
	export default {
		data() {
			return {
				uid: uni.getStorageSync('uid'),
				activeTab: 0,
				tabList: [{
						name: '全部'
					},
					{
						name: '待评价'
					},
					{
						name: '已完成'
					}
				],
				statusText: {
					1: '在线',
					2: '忙碌',
					3: '离线'
				},
				allRecords: [],
				pendingRecords: [],
				completedRecords: [],
				isEvaluation: ""
			};
		},
		computed: {
			currentRecords() {
				const tabMap = [
					this.allRecords,
					this.pendingRecords,
					this.completedRecords
				];
				return tabMap[this.activeTab] || [];
				uni.showToast()
			}
		},
		mounted() {
			this.getmyListenRecord();
		},
		methods: {
			getmyListenRecord() {
				var data = {
					isEvaluation: this.isEvaluation,
					userId: 2037557,
					pageNum: 1,
					pageSize: "10",
					token: "5d7aa5fc0b3a48e2a912a94a4671ddf4"
				};
				myListenRecord(data).then(res => {
					if (res.code === "200" && res.data && res.data.list) {
						// 全部记录
						this.allRecords = res.data.list;
					} else {
						console.error("获取数据失败:", res.msg);
					}
				}).catch(err => {
					console.error("请求出错:", err);
				});
			},
			handleTabChange(index) {
				console.log(index)
				if (index.name == "全部") {
					this.isEvaluation = "",
						this.getmyListenRecord();
				}
				if (index.name == "待评价") {
					this.isEvaluation = "evaluated",
						this.getmyListenRecord();
				}
				if (index.name == "已完成") {
					this.isEvaluation = "finish"
					this.getmyListenRecord();
				}
			},
			navigateEvaluate(item) {
				uni.navigateTo({
					url: `/pages/evaluate/evaluate?teacherId=${item.teacherId}&bookingId=${item.bookingID}`
				});
			},
			async navigateTeacher(teacherId) {
				// 检查咨询师状态
				const res = await this.$http.post('/checkOnlineStatus', {
					consultantid: teacherId
				});
				if (res.data === '1') {
					uni.navigateTo({
						url: `/pages/userMessages/userMessages?listenerId=${teacherId}`
					});
				} else {
					uni.showToast({
						title: '对方当前不可咨询',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style scoped>
	.container {
		background: #f5f7fa;
		min-height: 100vh;
		padding: 20rpx;
	}

	.record-card {
		margin-top: 10px;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 32rpx;
		border-bottom: 2rpx solid #f0f0f0;
		font-size: 24rpx;
		color: #7b8c95;
	}

	.status-tag {
		padding: 4rpx 16rpx;
		background: #e8f4ff;
		color: #678fcd;
		border-radius: 20rpx;
		font-size: 22rpx;
	}

	.time-text {
		color: #909399;
		font-size: 22rpx;
	}

	.card-body {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
	}

	.teacher-info {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 2rpx solid #f0f0f0;
	}

	.teacher-detail {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.teacher-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #303133;
	}

	.status-box {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.status-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.status-text {
		font-size: 24rpx;
	}

	/* 状态颜色 */
	.status-1 .status-dot {
		background: #67c23a;
	}

	.status-1 .status-text {
		color: #67c23a;
	}

	.status-2 .status-dot {
		background: #e6a23c;
	}

	.status-2 .status-text {
		color: #e6a23c;
	}

	.status-3 .status-dot {
		background: #909399;
	}

	.status-3 .status-text {
		color: #909399;
	}

	.button-group {
		display: flex;
		gap: 16rpx;
	}

	.u-button {
		min-width: 140rpx;
	}
</style>